
<template>
    <div class="layout">
        <Row class="layout-box" type="flex">
            <i-col span="4" class="layout-menu-left">
              <div class="layout-logo-left">消息推送管理系统</div>   
              <Menu @on-select="Jump" theme="dark" width="auto" accordion>          
                     
                  <Submenu v-bind:key="index" v-for="(item,index) in oldMenu" v-bind:name="index">
                    <template slot="title">
                        <!-- <Icon type="ios-navigate"></Icon> -->
                        {{item.title}}
                    </template>
                    <MenuItem v-for="(m,n) in item.submenu" v-bind:key="n" v-bind:name="index + '-' + n">{{m.title}}</MenuItem>
                  </Submenu>
              </Menu> 
              
            </i-col>
            <i-col class="layout-container-right" span="20">
                <div class="layout-header">
                   <Row>
                      <Col offset="20" span="4">
                       <ul>
                         <li>
                           欢迎您：管理员
                         </li>
                         <li>
                          <a href="#">
                            <Icon type="power"></Icon>
                          </a>
                         </li>
                       </ul>                                               
                      </Col>
                  </Row>
                 
                </div>
                <div class="layout-breadcrumb">
                    <Breadcrumb>
                        <Breadcrumb-item v-for="(item,index) in breadData" v-bind:key="index">{{item}}</Breadcrumb-item>        
                    </Breadcrumb>
                </div>
                <div class="layout-content">
                    <div class="layout-content-main">
                          <router-view></router-view>
                    </div>
                </div>
                <!-- <div class="layout-copy">
                    2011-2016 &copy; TalkingData
                </div> -->
            </i-col>
        </Row>
    </div>
</template>
<style scoped lang="less">
@import "./public/styles/common.css";
.layout {
  width: 100%;
  height: 100%;
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  .layout-box {
    height: 100%;
  }
}

.layout-container-right {
  display: -webkit-box;
  -webkit-box-orient: vertical;

  .layout-header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    ul {
      width: 100%;
      height: 60px;
      line-height: 60px;
      overflow: hidden;
      li {
        float: left;
        margin: 0 0 0 30px;
        font-size: 15px;
      }
    }
  }
  .layout-breadcrumb {
    padding: 10px 15px 0;
  }
  .layout-content {
    -webkit-box-flex: 1;
    min-height: 200px;
    margin: 15px;
    overflow: auto;
    background: #fff;
    border-radius: 4px;
  }
  .layout-content-main {
    position: relative;
    padding: 10px;
  }
  .layout-copy {
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
  }
}

.layout-menu-left {
  //   background: #464c5b;
  ul {
    height: 100%;
    overflow: auto;
  }
  .layout-logo-left {
    width: 90%;
    height: 30px;
    // background: #5b6270;
    // background: url(./public/images/logo.png) 10px 0 no-repeat;
    background-size: contain;
    border-radius: 3px;
    margin: 15px auto;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    font-size: 18px;
    // color: #fff;
  }
}
</style>
<script>
export default {
  data() {
    return {
      breadData: ['首页',"欢迎页"],
      oldMenu: [
        {
          title: "首页",
          submenu: [
            {
              title: "欢迎页",
              url: "/welcome"
            },
            {
              title: "个人资料",
              url: "/personInfo"
            }
          ]
        },
        {
          title: "消息",
          submenu: [
            {
              title: "手工推送",
              url: "/a"
            },
            {
              title: "APP参数管理",
              url: "/c"
            },
            {
              title: "私信日志查询",
              url: "/d"
            },
            {
              title: "短信日志查询",
              url: "/d"
            }
          ]
        },
        {
          title: "黑名单",
          submenu: [
            {
              title: "短信发送规则管理",
              url: "/b"
            },
            {
              title: "黑名单规则管理",
              url: "/b"
            },
            {
              title: "用户黑名单管理",
              url: "/b"
            },
            {
              title: "IP黑名单管理",
              url: "/b"
            },
            {
              title: "IP白名单管理",
              url: "/b"
            }
          ]
        }
      ],
      menu: {
        a: [
          {
            title: "首页",
            submenu: [
              {
                title: "欢迎页",
                url: "/a"
              },
              {
                title: "修改密码",
                url: "/details"
              }
            ]
          }
        ],
        b: [
          {
            title: "项目管理",
            submenu: [
              {
                title: "借款人列表",
                url: "/b"
              },
              {
                title: "担保人列表",
                url: "/c"
              },
              {
                title: "草稿箱",
                url: "/d"
              }
            ]
          }
        ],
        c: [
          {
            title: "其它管理",
            submenu: [
              {
                title: "借款人列表",
                url: "/b"
              }
            ]
          }
        ],
        d: [
          {
            title: "hao",
            submenu: [
              {
                title: "借款人列表",
                url: "/b"
              }
            ]
          }
        ]
      },
      MenuList: [],
      selectId: "a"
    };
  },
  mounted() {
    // var selectId = this.selectId;
    var menu = this.menu;
    console.log(menu);
    // this.MenuList = menu[selectId];
  },
  beforeDestroy() {},
  methods: {
    Jump(index) {
      console.log(index);
      var self = this;
      var menuList = self.oldMenu;
      var one = index.split("-");
      var url = menuList[one[0]].submenu[one[1]].url;
      var a = menuList[one[0]].title;
      var b = menuList[one[0]].submenu[one[1]].title;
      var breadArr = [a,b];

      // 设置面包屑数据
      this.breadData = breadArr;
      this.$router.push(url);
    },
    ChangeMenu(index) {
      // 一级菜单
      console.log(index);
      var menu = this.menu;
      this.MenuList = menu[index];
    }
  }
};
</script>
